<template>
  <canvas v-if="showPercentage" ref="percentage" class="percentage" id="circle" height="155px" width="155px" />
</template>
<script>
export default {
  name: "percentage",
  data() {
    return {
      chartPercentage: null,
      showPercentage: true
    };
  },
  props: ['res'],
  watch: {
    // res: {
    //   handler(val) {
    //     console.log(val)
    //     this.chartPercentage = val
    //     this.showPercentage = false
    //     setTimeout(() => {
    //       this.showPercentage = true
    //       this.circle()
    //     })
    //   },
    //   deep: true
    // },
    res(val) {
      this.chartPercentage = val
      this.showPercentage = false
      setTimeout(() => {
        this.showPercentage = true
        setTimeout(() => {
          this.circle()
        })
      })
    }
  },
  methods: {
    circle() {
      let drawCircle = (circleObj) => {
        var ctx = circleObj.ctx;
        ctx.beginPath();
        ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle, false);
        ctx.lineWidth = circleObj.lineWidth;
        ctx.strokeStyle = circleObj.color;
        ctx.lineCap = 'round';
        ctx.stroke();
        ctx.closePath();
      }
      let percent = (this.chartPercentage.used / this.chartPercentage.limit * 100).toFixed(2)
      var canvas = this.$refs.percentage;
      if (!canvas) return
      var ctx = canvas.getContext("2d");
      ctx.font = "16px Microsoft YaHei";
      ctx.fillStyle = this.chartPercentage.color;
      var insertContent = ' ';
      var text = ctx.measureText(insertContent);
      // ctx.fillText(insertContent, (132 - text.width) / 2, 68);
      // if (isNaN(parseInt(percent))) {
      //   percent = 0.0;
      // }
      // let restValue = Math.ceil(this.chartPercentage.limit - this.chartPercentage.used)
      // let restValueStr = `剩余${restValue}${this.chartPercentage.unit}`
      // text = ctx.measureText(restValueStr);
      // ctx.fillText(restValueStr, (132 - text.width) / 2, 65);
      var ratioStr = percent + '%';
      text = ctx.measureText(ratioStr);

      // ctx.fillText(ratioStr, (132 - text.width) / 2, 90);
      ctx.fillText(ratioStr, (155 - text.width) / 2, 85);
      var circleObj = {
        ctx: ctx,
        x: 77.5,
        y: 77.5,
        radius: 55,
        lineWidth: 14
      }
      // circleObj.startAngle = - Math.PI * 2 * 90 / 360;
      // circleObj.endAngle = Math.PI * 2 * (percent / 100 - 0.25);
      // circleObj.color = this.chartPercentage.color;
      // drawCircle(circleObj);
      // circleObj.startAngle = circleObj.endAngle;
      // circleObj.endAngle = Math.PI * 2;
      // circleObj.color = this.chartPercentage.underpainting;
      // drawCircle(circleObj);

      circleObj.startAngle = - Math.PI * 2 * 90 / 360;
      circleObj.endAngle = Math.PI * 2 * (percent / 100 - 0.25);
      circleObj.color = this.chartPercentage.color;
      drawCircle(circleObj);
      circleObj.startAngle = circleObj.endAngle;
      circleObj.endAngle = Math.PI * 2 * (100 - 0.25);
      circleObj.color = this.chartPercentage.underpainting;
      drawCircle(circleObj);
      circleObj.startAngle = - Math.PI * 2 * 90 / 360;
      circleObj.endAngle = Math.PI * 2 * (percent / 100 - 0.25);
      circleObj.color = this.chartPercentage.color;
      drawCircle(circleObj);
    }
  },
  mounted() {
    this.chartPercentage = this.res
    // this.circle()
  },
};
</script>
<style lang="less" scoped>
.percentage {
  width: 155px;
  height: 155px;
  margin: 5px auto;
  border-radius: 75px;
  display: block;
}
</style>
